<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<script src="../../js/require.js"></script>
<link href="../../js/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="../../js/bootstrap/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="../../css/MyCss.css" />
<link href="../../js/DataTables/css/dataTables.bootstrap.css"
	rel="stylesheet">
<link href="../../css/public.css" rel="stylesheet">
<script type="text/javascript">
	requirejs.config({
		baseUrl : "../../js",
		paths : {
			"jquery" : "jquery",
			"bootstrap" : "bootstrap/js/bootstrap",
			"datatables" : "DataTables/js/jquery.dataTables.min.hxqc",
			"dbootstrap" : "DataTables/js/dataTables.bootstrap",
			"public" : "public"
		}

	});

	require(
			[ 'jquery', 'bootstrap', 'datatables', 'dbootstrap', 'public' ],
			function($) {
				var session_id = location.GetQueryString("session_id");
				if (session_id != null)
					$("#session_id").val(session_id);
				var table = $("#example")
						.dataTable(
								{
									"bProcessing" : true,// 加载数据时候是否显示进度条
									"iDisplayLength" : 10,
									"ordering" : false,// thead上的排序按钮
									"searching" : false,// 搜索输入框显示
									"bLengthChange" : false,// 分页条数选择按钮
									"bServerSide" : true,// 是否从服务加载数据
									"sAjaxSource" : GLOBAL.ctx
											+ "/log/loginList",// 如果从服务器端加载数据,这个属性用于指
									"sServerMethod" : "post",
									// 定加载的路径
									"sPaginationType" : "input",
									"defData" : {
										"user_id" : "user_id",
										"status" : "status",
										"session_id" : "session_id"
									},// 参数为自定义,修改了datatable原代码，添加了请求参数
									columns : [
											{
												data : "user_id"

											},
											{
												data : "login_ip"

											},
											{
												data : "session_id"

											},

											{
												data : "login_time",
												render : function(data, type,
														row) {

													return data.ToLocalTime();
												}
											},

											{
												data : "logout_time",
												render : function(data, type,
														row) {

													return (data == null || data == "") ? ""
															: data
																	.ToLocalTime();
												}
											},

											{
												data : "status",
												render : function(data, type,
														row) {
													return data == 1 ? "登出"
															: "登入";
												}
											} ],
									"oLanguage" : { // 主要用于设置各种提示文本
										"sProcessing" : "正在处理...", // 设置进度条显示文本
										"sLengthMenu" : "每页_MENU_行",// 显示每页多少条记录
										"sEmptyTable" : "没有找到记录",// 没有记录时显示的文本
										"sZeroRecords" : "没有找到记录",// 没有记录时显示的文本
										"sInfo" : "当前第_START_至_END_条  共计_TOTAL_条",
										"sInfoEmpty" : "",// 没记录时,关于记录数的显示文本
										"sSearch" : "搜索:",// 搜索框前的文本设置
										"oPaginate" : {
											"sFirst" : "首页",
											"sLast" : "未页",
											"sNext" : "下页",
											"sPrevious" : "上页"
										}

									}
								});

				$("#search_btn").click(function() {
					table.fnFilter();
				});

				$("#user_id").keypress(function(e) {
					// 回车键事件  
					if (e.which == 13) {
						table.fnFilter();
						return false;
					}

				});
			});
</script>

</head>

<body>
	<!--内容页开始 -->
	<div class="container-fluid">

		<!--表单框架-->
		<form class="form-horizontal" id="test">
			<div class="form_area">
				<div class="form_head">
					<div class="row">
						<div class="col-sm-9">
							<span class="title">登录日志列表</span>
						</div>
						<div class="col-sm-3"></div>
					</div>
				</div>
				<!--表格体-->
				<div class="form_body padding_top">

					<div class="row" style="margin: 10px 0px 0px 0px;">
						<div class="col-sm-3">
							<div class="form-group">
								<div class="input-group">
									<label class="input-group-addon">用户帐号：</label> <input
										name="user_id" id="user_id" type="text" placeholder="用户帐号"
										class="form-control">
								</div>
							</div>
						</div>

						<div class="col-sm-3">
							<div class="form-group">
								<div class="input-group">
									<label class="input-group-addon">会话ID：</label> <input
										name="session_id" id="session_id" type="text"
										placeholder="会话ID" class="form-control">
								</div>
							</div>
						</div>

						<div class="col-sm-4">
							<div class="form-group">
								<div class="input-group">
									<label class="input-group-addon">状态：</label> <select
										class="form-control" name="status" id="status">
										<option value="">全部</option>
										<option value="0">登入</option>
										<option value="1">登出</option>
									</select>
								</div>
							</div>
						</div>

						<div class="col-sm-2">
							<div class="form-group">
								<div class="input-group">
									<button type="button" class="btn btn-success" id="search_btn">
										<span class="glyphicon glyphicon-search"></span> 搜索
									</button>
								</div>
							</div>
						</div>

					</div>

					<div class="row">
						<div class="table-responsive">
							<!--  .table-responsive  响应式表格 表格太宽时底部出现滚动条-->
							<table id="example"
								class="table table-striped table-hover table-bordered">
								<!--.table 基本样式   .table-bordered 为表格和其中的每个单元格增加边框   .table-striped 增加斑马条纹样式 .table-hover 鼠标经过效果--->
								<thead>
									<tr>
										<th>用户帐号</th>
										<th>登陆IP</th>
										<th>会话ID</th>
										<th>登入时间</th>
										<th>登出时间</th>
										<th>状态</th>

									</tr>
								</thead>

							</table>
						</div>
					</div>

				</div>
			</div>
		</form>
	</div>



</body>
</html>

